<template>
  <div id="app">
    <el-row>
      <el-form :inline="true" class="demo-form-inline" :span="1">
        <el-form-item label="">
          <el-input v-model="searchContent" placeholder="请输入搜索内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-table
      :data="pi"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="80px">
      </el-table-column>
      <el-table-column
        prop="id"
        label="id"
        width="80px">
      </el-table-column>
      <el-table-column
        label="姓名"
        width="90px">
        <template slot-scope="scope">
          <div v-html="scope.row.name"></div>
        </template>
      </el-table-column>
      <el-table-column
        label="年龄"
        width="80px">
        <template slot-scope="scope">
          <div>{{scope.row.age}}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="生日"
        width="200px">
        <template slot-scope="scope">
          <div>{{scope.row.bir}}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="简介"
        width="400px">
        <template slot-scope="scope">
          <div v-html="scope.row.content"></div>
        </template>
      </el-table-column>
      <el-table-column
        label="地址"
        width="100px">
        <template slot-scope="scope">
          <div>{{scope.row.address}}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="danger" @click="remove(scope.row.id)" icon="el-icon-delete" >删除</el-button>
          <router-link :to="{path:'/user/update',query:{id:scope.row.id}}"><el-button type="primary" icon="el-icon-edit">更新</el-button></router-link>
        </template>
      </el-table-column>
    </el-table>
<!--    <el-pagination
      layout="sizes, prev, pager, next, jumper, ->, total"
      :total="pi.total"
      :page-size.sync="pi.pageSize"
      :page-sizes="[2,5,10,50]"
      :current-page.sync="pi.pageNum"
      :pager-count="9"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background>
    </el-pagination>-->
  </div>
</template>

<script>
export default {
  name: "UserTable",
  data(){
    return{
      pi:[],
      searchContent:""
    }
  },
  methods:{
    /*listPageUsers(pageNum,pageSize){
      this.axios.get("/"+pageNum+"/"+pageSize).then(res=>{
        this.pi = res.data;
      })
    },*/
    listUsers(){
      this.axios.get("").then(res=>{
        this.pi = res.data;
      })
    },
    /*handleSizeChange(size){
      this.listPageUsers(this.pi.pageNum,size);
    },
    handleCurrentChange(num){
      this.listPageUsers(num,this.pi.pageSize);
    },*/
    remove(id){
      if(confirm("确定删除吗？")){
        this.axios.delete("/"+id)
          .then(res=>{
            this.$message.success("删除成功");
            this.listUsers();
          })
      }
    },
    onSubmit(){
      this.axios.get("/search/"+this.searchContent).then(res=>{
        this.pi = res.data;
      })
    }
  },
  created() {
    this.listUsers();
  }
}
</script>

<style scoped>

</style>
